<template>
	<div class="panorama2">
		<div id="main" style="width: 418px;height: 238px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'panorama2',
		data() {
			return{
				titleData:[],
				ningboData:[],
				zhejiangData:[],
				quanguoData:[],
			}
		},
		mounted() {
			this.getList()
			
		},
		methods: {
			 togetData(valueName){
				let qn = {
					"params": {
						"normGuid": "dda6767d-a2c0-46d4-9800-80781e413c71",
						"fieldList": [{
						            "key":"statictype",
						            "value":valueName
						        }]
						}
				};
				
				
				return qn
			},
			async getList(){
				var _this = this;
				let qn=_this.togetData("中国-新材料")
				const quguo = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', qn)
				let {custom:{result}}={...quguo}
				_this.titleData=result.cockpitData.map(item=>{return item.application_date})
				_this.quanguoData=result.cockpitData.map(item=>{return item.sum})
				
				let zn=_this.togetData("浙江-新材料")
				const zhejiang = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', zn)
				let {custom:{result:resultZ}}={...zhejiang}
				_this.zhejiangData=resultZ.cockpitData.map(item=>{return item.sum})
				
				let nn=_this.togetData("宁波-新材料")
				const ningbo = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', nn)
				let {custom:{result:resultN}}={...ningbo}
				_this.ningboData=resultN.cockpitData.map(item=>{return item.sum})
				// this.qcockpitData=result.cockpitData
				// this.yearList=this.qcockpitData.map(item=>{
				// 	return item.application_date
				// })
				
				_this.$nextTick(()=>{
					_this.myEcharts();
				})
			},
			myEcharts() {
				let myChart = this.$echarts.init(document.getElementById('main'));
				//配置图表
				var option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					 grid: {
					    left: "15%",
						top:30,
						height:'55%',
					  },
					yAxis: {
						type: 'value',
						axisLabel: {
							textStyle: {
								color: 'rgba(255, 255, 255, 0.6)',
								fontSize:15
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#B1B1B1 '
							}
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: '#556468'
							}
						}
					},
					xAxis: {
						type: 'category',
						axisLine: {
							show: true,
							lineStyle: {
								color: '#B1B1B1 '
							}
						},
						axisLabel: {
							textStyle: {
								color: '#DFF8FF',
								fontSize:17
							}
						},
						axisTick: {
							show: false,
						},
						data:this.titleData
					},
					series: [
						{
							name: '宁波',
							type: 'bar',
							data: this.ningboData,
							barWidth:14,
							barGap: 0.7,
							label:{
								show: true,
								position: "top",
								color: "#FFFFFF",
								fontSize: 15
							},
							itemStyle: {
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								        offset: 0,
								        color: 'rgba(245, 175, 15, 1)' 
								    }, {
								        offset: 1,
										color: 'rgba(245, 215, 95, 0)'
								}], false), // 渐变
							},
						},{
							name: '浙江',
							type: 'bar',
							data: this.zhejiangData,
							barWidth:14,
							barGap: 0.7,
							label:{
								show: true,
								position: "top",
								color: "#FFFFFF",
								fontSize: 15
							},
							itemStyle: {
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								        offset: 0,
										color: 'rgba(113, 42, 206, 1)'
								    }, {
								        offset: 1,
								         color: 'rgba(152, 101, 224, 0)'
								}], false), // 渐变
							},
						},{
							name: '全国',
							type: 'bar',
							data: this.quanguoData,
							barWidth:14,
							barGap: 0.7,
							label:{
								show: true,
								position: "top",
								color: "#FFFFFF",
								fontSize: 15
							},
							itemStyle: {
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(38, 239, 225, 1)' 
									}, {
									offset: 1,
									color: 'rgba(0, 136, 255, 0)'
								}], false), // 渐变
							},
						}
					]
				};
				myChart.setOption(option);
			}
		}
	}
</script>


<style>

</style>
